<template>
  <div class="record-wrapper">
    <section>
      <div class="content">
        <div class="item">试卷名称:第三章测验</div>
        <div class="item">出卷时间:2017-19-23</div>
        <div class="item">参与人数:72</div>
      </div>
      <div class="actions">
        <button>查看试卷</button><button>查看成绩</button>
      </div>
    </section>
  </div>
</template>

<script>
export default {};
</script>

<style lang='scss' scoped>
.record-wrapper {
  font-size: 0.9rem;
  margin: 0 2em;
  section {
    margin-top: 2em;
    box-shadow: 2px 2px 5px gray;
    padding: 0.8em 1em;
    background: gray;
    width: 100%;
    display: flex;
    justify-content: space-between;
    box-shadow: 0px 5px 5px gray;
    .content {
      display: flex;
      .item + .item {
        padding-left: 1em;
      }
    }
    .actions {
      display: flex;
    }
  }
}
@media screen and (max-width: 620px) {
  .record-wrapper {
    margin: 0 0.8em;
    section {
      .content {
        flex-direction: column;
        .item + .item {
          padding-left: 0;
        }
      }
      .actions {
        flex-direction: column;
        justify-content: space-between;
      }
    }
  }
}
</style>